<template>
    <div class="remote-panel-wrapper">
        <div class="remote-panel-header">
            <el-button class="remote-tool-btn" type="danger" @click="handleNewRemote">新建远程</el-button>
        </div>
        <div class="remote-panel">
            <div class="remote-panel-sider">
                <RemoteList ref="remote_list" @remote-click="onRemoteClick" />
            </div>
            <div class="remote-panel-body">
                <RemoteInfo ref="remote_info" @update-ssh-status="onUpdateSshStatus" />
            </div>
        </div>
    </div>
    <!-- create remote dialog -->
    <el-dialog v-model="dialogFormVisible" title="添加远程" align-center width="450px" :before-close="handleBeforeClose">
        <el-form ref="editForm" :model="form" :rules="rules">
            <el-form-item label="标签" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="主机" :label-width="formLabelWidth" prop="host">
                <el-input v-model="form.host" />
            </el-form-item>
            <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
                <el-input v-model="form.port" />
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="认证方式" :label-width="formLabelWidth">
                <el-radio-group v-model="form.validation">
                    <el-radio :label="`Password`"></el-radio>
                    <el-radio :label="`IdentityFile`"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.validation === 'Password'" label="密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item v-if="form.validation === 'IdentityFile'" label="私钥文件" :label-width="formLabelWidth" prop="identity_file">
                <el-input v-model="form.identity_file" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onAddRemote"> 确定 </el-button>
                <el-button @click="showDialog(false)">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
const name = 'RemotePanel';
import API from '@/js/api';
import { getCurrentInstance, inject, ref, reactive } from 'vue';
import RemoteList from './RemoteList.vue';
import RemoteInfo from './RemoteInfo.vue';
const { proxy } = getCurrentInstance();
let vueApp = inject('vueApp');

defineExpose({});

// 对话框相关的变量
let dialogFormVisible = ref(false);
let formLabelWidth = '80px';
let form = reactive({
    id: null,
    name: '',
    host: '',
    port: 22,
    username: '',
    validation: 'Password',
    password: '',
    identity_file: ''
});
let rules = reactive({
    name: [
        {
            required: true,
            message: '请输入标签',
            trigger: 'blur'
        }
    ],
    host: [
        {
            required: true,
            message: '请输入主机地址',
            trigger: 'blur'
        }
    ],
    port: [
        {
            required: true,
            message: '请输入端口',
            trigger: 'blur'
        }
    ],
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        }
    ],
    identity_file: [
        {
            required: true,
            message: '请输入私钥文件',
            trigger: 'blur'
        }
    ]
});

async function onRemoteClick(remote) {
    // 设置remote看板信息
    proxy.$refs.remote_info.setRemote(remote);
}

function onUpdateSshStatus(remoteId) {
    proxy.$refs.remote_list.updateSshStatus(remoteId);
}

function showDialog(show) {
    dialogFormVisible.value = show;
    vueApp.monitorKeyEvent(!show);
}

function handleBeforeClose(done) {
    vueApp.monitorKeyEvent(true);
    done();
}

function handleNewRemote() {
    form.id = null;
    showDialog(true);
}

async function onAddRemote() {
    let editForm = proxy.$refs.editForm;
    await editForm.validate(async (valid, fields) => {
        if (valid) {
            let result = null;
            let api_method = '';
            let tip_msg = '';

            // 根据form.id和form.validation信息，确定请求API的参数
            if (!form.id) {
                api_method = 'AddRemote';
                tip_msg = '创建';
            } else {
                api_method = 'UpdateRemote';
                tip_msg = '更新';
            }

            if (form.validation == 'Password') {
                form.identity_file = '';
            } else {
                form.password = '';
            }

            // 调用本地接口
            result = await API.local.invoke(api_method, {
                id: form.id,
                name: form.name,
                host: form.host,
                port: form.port,
                username: form.username,
                password: form.password,
                identity_file: form.identity_file
            });

            // 弹出提示信息
            if (result.code == 0) {
                ElMessage.success(tip_msg + '远程配置成功！');
            } else {
                ElMessage.error(tip_msg + '远程配置失败，错误原因：' + result.msg);
            }

            // 更新列表
            await proxy.$refs.remote_list.getRemoteList();
            showDialog(false);
        } else {
            console.log('error submit!', fields);
        }
    });
}
</script>

<style scoped>
.remote-panel-wrapper {
    background-color: rgb(239, 241, 243);
    width: calc(100% - 64px);
    height: 100%;
    padding: 0px;
    box-sizing: border-box;
}

.remote-panel-header {
    display: flex;
    background-color: rgb(249, 248, 248);
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
}

.remote-panel {
    display: flex;
    width: 100%;
    height: calc(100% - 50px);
}

.remote-panel-sider {
    width: 280px;
    height: 100%;
    box-sizing: border-box;
    color: rgb(250, 251, 251);
    padding: 3px;
}

.remote-panel-body {
    width: calc(100% - 280px);
    height: 100%;
    box-sizing: border-box;
}

.remote-tool-btn {
    margin-left: 5px;
}
</style>
